<template>
<div id="app">
  <div class="filter-container">
    <el-form :inline="true" class="demo-form-inline">
    <el-form-item label="帖子id" >
    <el-input  placeholder="帖子id" v-model="inviteid"></el-input>
  </el-form-item>
<el-form-item label="帖子标题">
    <el-input  placeholder="帖子标题" v-model="invitetitle"></el-input>
  </el-form-item>
  <el-form-item label="类型">
    <el-select  placeholder="类型"  v-model="invitetype">
    <el-option label="全部" value=""></el-option>
      <el-option label="问题" value="问题"></el-option>
      <el-option label="帖子" value="帖子"></el-option>
    <el-option label="分享" value="分享"></el-option>
      <el-option label="思绪" value="思绪"></el-option>
      <el-option label="公告" value="公告"></el-option>
      
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" icon="el-icon-search" @click="searchs">查询</el-button>
     <el-button type="success" icon="el-icon-plus" @click="adds">发布</el-button>
  </el-form-item>
</el-form>
  </div>

  <div class="header">
      <!--数据展现table-->
    <el-table 
    :data="tableData"
    border 
    stripe>
        <el-table-column align="center" label="序号" type="index" width="50" />
        <el-table-column align="center" prop="inviteCode" label="帖子编码"/>
        <el-table-column align="center" prop="inviteId" label="帖子id"  sortable/>
         <el-table-column align="center" prop="inviteTitle" label="帖子标题"/>
          <el-table-column align="center" label="详情"  width="150">
            <template slot-scope="scope">
                <el-button type="primary" size="mini"  @click="xiangqing(scope.row)">详情</el-button>
            </template>
        </el-table-column>
          <el-table-column align="center" prop="type" label="类型">
              <template slot-scope="scope">
                <el-tag type="success">{{scope.row.type}}</el-tag>
              </template>
          </el-table-column>
         <el-table-column align="center" prop="bytime" label="创建时间"  sortable/>
         <el-table-column align="center" prop="updatetime" label="修改时间"/>
        <el-table-column align="center" label="操作"  width="150">
            <template slot-scope="scope">
                <el-button type="primary" size="mini"  @click="edit(scope.row)">编辑</el-button>
                <el-button type="danger" size="mini"   @click="del(scope.row)" >删除</el-button>
            </template>
        </el-table-column>
    </el-table>
  </div>
  <div class="pagination">
      <el-pagination @size-change="handleSizeChange" 
                          @current-change="handleCurrentChange" 
                          :current-page="pageNum" 
                          :page-sizes="[5,10,15,20]" 
                          :page-size="pageSize" 
                           layout="total, sizes, prev, pager, next, jumper" 
                          :total="dataSize">
             </el-pagination>
  </div>
<addShop ref="addShop"></addShop>
<addUser ref="addUser" @getData='getData'></addUser>
<edit ref="edit"  @getData='getData'></edit>
</div>
</template>
<script>
import { searchInvite ,deleteInvite} from '@/api/shop';
import addShop from "../delog/addShop";
import addUser from "../delog/addInvite";
import edit from "../delog/edit";
export default {
  name: 'user',
 components: {
   addShop,
   addUser,
   edit
  },
  data () {
    return {
      index:'',
        tableData: [{}], // 表格数据
        pageNum: 1, // 页数
        pageSize: 5, // 每页大小
        dataSize: 0, // 总条数
        inviteid:'',
        invitetitle:'',
        invitetype:''
    }
  },
  mounted () {
      // 获取数据
      this.getData()
  },
  methods: {
    //查询所有数据
      getData() {
        let obj={
             pageNum:this.pageNum,
             pageSize:this.pageSize,
             inviteId:this.inviteid,
             inviteTitle:this.invitetitle,
             type:this.invitetype
        }
        searchInvite(obj).then(response => {     
        if(response.data.responseCode===200){
                this.tableData=response.data.data.list;
                this.dataSize=response.data.data.total
        }else{
        this.$message({
          showClose: true,
          message: '错了哦，没找到数据',
          type: 'error'
        });
          }
      
      })
      },
      // 每页条数
      handleSizeChange(val){
        this.pageSize = val
         this.getData()
      },
      // 第几页
      handleCurrentChange(val){
        this.pageNum = val
         this.getData()
      },
      searchs(){
          this.getData()
      },adds(){
        console.log("===");
        
          this.$refs.addUser.open(true)
      },
      //删除
      del(val){        
         this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            //  deleteInvite
            let obj={
                 invitCode:val.inviteCode
            }
              deleteInvite(obj).then(response => {     
                if(response.data.responseCode===200){
                this.getData()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
                }
              }).catch(error=>{
                  this.$message({
              type: "error",
              message: "删除失败！"
            });
              })
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });

      },
      xiangqing(val){
     this.$refs.addShop.open(true,val.inviteContent)
      },
      edit(val){
        this.$refs.edit.open(true,val)
      }
  },
  watch: {
    pageNo: function() {
      this.getData()
    },
    // 监听页面大小
    pageSize: function() {
      this.getData()
    }
  }
}
</script>

<style scoped>
.pagination {
  margin-top: 10px;
  text-align: right;
}
.filter-container {
  margin-top: 20px;
  float: right;
  margin-bottom: 20px
}
.filter-item {
  margin-left: 5px;
}
</style>